<template>
  <article class="col-7 fl">
    <div >
      课程测试题目
	  
	  
		  <div class="aa" v-for= "(item,i) in testsList " :key="i">
  {{ item.text }}</div>	
  	   <el-form >	   
  <span>第一题:</span>
	<el-radio-group v-model="tf1">
			<el-radio :label="2">2</el-radio>
			<el-radio :label="5">5</el-radio>
			<el-radio :label="7">7 </el-radio>
	</el-radio-group>
	<div></div>
	<span>第二题:</span>
		<el-radio-group v-model="tf2">
				<el-radio :label="2">2</el-radio>
				<el-radio :label="3">3</el-radio>
				<el-radio :label="5">5</el-radio>
		</el-radio-group>
		<div></div>
		<span>第三题:</span>
			<el-radio-group v-model="tf3">
					<el-radio :label="2">2</el-radio>
					<el-radio :label="4">4</el-radio>
					<el-radio :label="5">5</el-radio>
			</el-radio-group>
			<div></div>
			<span>第四题:</span>
				<el-radio-group v-model="tf4">
						<el-radio :label="2">2</el-radio>
						<el-radio :label="3">3</el-radio>
						<el-radio :label="5">5</el-radio>
				</el-radio-group>
				<div></div>
				<span>第五题:</span>
					<el-radio-group v-model="tf5">
							<el-radio :label="2">2</el-radio>
							<el-radio :label="3">3</el-radio>
							<el-radio :label="7">7</el-radio>
          					</el-radio-group>
	             <div></div>
				 
				 
     <el-button type="success" @click="doSubmit">提交</el-button>
	 </el-form>
	 <p>您的分数:<span v-show="isshow" class="fs">{{fs}}</span></p>
    </div>
  </article>
</template>
<script>
import testsapi from '~/api/tests'

export default {

  async asyncData(page) {
    const response = await testsapi.getById(page.route.params.id)
    return {
      testsList: response.data.testsList,
    }
  },
  data() {
    return {
      // tests: [],
	  tf1:'',
	  tf2:'',
	  tf3:'',
	  tf4:'',
	  tf5:'',
	  fs:0,
	  csfs1:0,
	  csfs2:0,
	  csfs3:0,
	 csfs4:0,
	  csfs5:0,
	  isshow:false,
	  
	  }
  },

  created() {
            
  },

  methods: {
	  doSubmit:function(){

		  if(this.tf1==this.testsList[0].tf){
			 this.  csfs1=this.testsList[0].csfs;
		  }else{
			  this.csfs1=0;
		  }
		  if(this.tf2==this.testsList[1].tf){
		  			 this.csfs2=this.testsList[1].csfs;
		  			
		  }
		  else{
		  			  this.csfs2=0;
		 }
		 if(this.tf3==this.testsList[2].tf){
		 			 this.csfs3=this.testsList[2].csfs;
		 			
		 }
		 else{
		 			  this.csfs3=0;
		 }
		  if(this.tf4==this.testsList[3].tf){
		  			 this.csfs4=this.testsList[3].csfs;
		  			
		  }
		  else{
		  			  this.csfs4=0;
		  }
		  if(this.tf5==this.testsList[4].tf){
		  			 this.csfs5=this.testsList[4].csfs;
		  			
		  }
		  else{
		  			  this.csfs5=0;
		  }
		  this.fs=this.csfs1+this.csfs2+this.csfs3+this.csfs4+this.csfs5;
		  this.isshow=true;
		  
	  }




   
  }
}
</script>
<style>
	
	.aa{ width:100%;
	   height:50px;
	 /*  background-color: #42c88c; */
		}
		.fs{
			color: red;
		}
</style>
